<template>
  <van-index-bar :sticky="false" :index-list="groupIndex">
    <van-index-anchor index="热门" />
    <div class="hotCities">
      <template v-for="city in groupData.hotCities" :key="city.cityId">
        <div class="item">{{ city.cityName }}</div>
      </template>
    </div>
    <template v-for="groups in groupData.cities" :key="groups.group">
      <van-index-anchor :index="groups.group" />
      <!-- <div>121</div> -->
      <!--  -->
      <template v-for="city in groups.cities" :key="city.cityId">
        <van-cell :title="city.cityName" />
      </template>
    </template>
  </van-index-bar>
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({})
  }
})
const groupIndex = computed(() => {
  const indexList = props.groupData?.cities?.map(item => item.group)
  indexList.unshift("#")
  return indexList
})

</script>
<style lang="less" scoped>
:deep(.van-index-bar__sidebar) {
  position: absolute;
}

.hotCities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;

  .item {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    background-color: #fff4ec;
    margin: 6px 0;
  }
}
</style>
